<template>
	<view>
		<view class="page-box min-full-height">
			<view class="header-box">
				<view class="main-box">
					<!--头像-->
					<u-avatar :src=user.headUrl shape="circle" :size="50" @click="clickInfo"></u-avatar>
					<view class="userinfo-box flex-col">
						<view v-if="loginState" class="nick-name" @click="clickInfo">{{ user.userNick }}</view>
						<view v-else class="nick-name" @click="clickInfo">点击登录</view>
					</view>
				</view>
				<!-- <block v-if="loginState">
					<view class="culture">
						课程学分：<text class="text">{{ cultureData.tjz1 }}</text>
						</br>
						平均绩点：<text class="text">{{ cultureData.tjz2 }}</text>
						</br>
						<u-icon name="moments" color="#fff" size="22" @click="resetCulture"></u-icon>
					</view>
				</block> -->
			</view>
			<view class="menu-box">
				<!-- 功能列表 -->
				<menu-list></menu-list>
			</view>
			<view class="admin-box" v-if="user.roleId == 1">
				<!-- 管理列表 -->
				<admin-list></admin-list>
			</view>
			<!-- <view v-else style="width: 100%;position: absolute;bottom: 0;">
				<ad unit-id="adunit-5b8901c6fd32191d"></ad>
			</view> -->
			<u--text type="info" align="center" text="小程序由广州理工学院校友提供支持"></u--text>
			<login-popup v-if="modalShow"></login-popup>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import { menuList } from "@/components/menu-list/menu-list.vue"
	import { adminList } from "@/components/admin-list/admin-list.vue"
	import {
		// getCultureProgram,
		// synCultureProgramData
	} from '@/plugins/api/cultureApi.js'
	export default {
		components: {
			menuList,
			adminList
		},
		data() {
			return {
				user: {},
				// cultureData: {
				// 	tjmc1: '',
				// 	tjz1: '',
				// 	tjz2: ''
				// },
			}
		},
		onShow() {
			this.user = this.userInfo
			// this.getCultureData()
		},
		onLoad() {
			this.user = this.userInfo
		},
		// 计算属性，相关依赖发生改变时会进行更新，重新执行
		computed: {
			...mapState('user', ['modalShow', 'openId', 'userInfo', 'loginState', 'isJwgl'])
		},
		methods: {
			...mapActions('user', ['openModalAction', 'openIsJwglAction', 'closeIsJwglAction']),
			// 进入个人信息页面，需要登录，未登录会跳出登录窗口
			clickInfo() {
				this.$navTo('/page_my/pages/my-info')
			},
			// 加载绩点数据
			// getCultureData() {
			// 	getCultureProgram({
			// 		openId: this.openId
			// 	}).then(res => {
			// 		if (res.data.data != null && res.data.data != '') {
			// 			this.cultureData = res.data.data
			// 		} else {
			// 			this.$u.toast('无数据，请移步加载')
			// 		}
			// 	}).catch(err => {
			// 		this.$u.toast('绩点数据加载异常，请稍后再试')
			// 	})
			// },
			// 重置绩点数据
			// async resetCulture() {
			// 	// 判断是否有链接正在执行
			// 	if (!this.isJwgl) {
			// 		uni.$u.toast('存在数据正在同步，别着急喔！')
			// 		return;
			// 	}
			// 	uni.showLoading({
			// 		title: '正在加载'
			// 	})
			// 	await synCultureProgramData({
			// 		openId: this.openId,
			// 		sign: 'sinder@1021'
			// 	}).then(res => {
			// 		// 异步执行，不会进来这里
			// 	}).catch(err => {
			// 		console.log(err)
			// 		uni.hideLoading()
			// 		let that = this
			// 		if (err.data == '') {
			// 			this.openIsJwglAction()
			// 			uni.$u.toast('数据同步中，20s刷新')
			// 			setTimeout(function() {
			// 				// 这里写要延时执行的代码
			// 				that.closeIsJwglAction()
			// 				// 数据刷新
			// 				that.getCultureData()
			// 			}, 20000); //20s刷新数据
			// 		} else {
			// 			uni.$u.toast(err.data.msg)
			// 		}
			// 	})
			// }
		}
	}
</script>
<style scoped lang="scss">
	.page-box {
		box-shadow: 0rpx 0rpx 32rpx 0rpx rgba(83, 83, 84, 0.13) inset;
		position: relative;
		background-color: #ffffff;
	}
	
	.header-box {
		width: 100%;
		position: relative;
		background-color: #9FCEFF;
		height: 300rpx;
		
		.main-box {
			position: absolute;
			height: 150rpx;
			width: 150rpx;
			top: 75rpx;
			left: 80rpx;
		}
		
		.culture {
			position: absolute;
			height: 180rpx;
			width: 250rpx;
			top: 75rpx;
			right: 30rpx;
			color: #f3f0e2;
			line-height: 50rpx;
			
			.text {
				color: #e25a53;
			}
		}
	
		.userinfo-box {
			flex-grow: 1;
	
			.nick-name {
				padding: 15rpx 0 0 0;
				font-size: 26rpx;
				font-weight: bold;
				color: #FFFFFF;
				letter-spacing: 2rpx;
				text-indent: 2rpx;
			}
		}
	
		.edit-icon {
			flex-shrink: 0;
			width: 18rpx;
			height: 30rpx;
		}
	}
	
	.menu-box {
		position: relative;
		//z-index: 2;
		margin-top: -30rpx;
		border-radius: 60rpx 60rpx 0 0 / 40rpx 40rpx 0 0;
		padding: 32rpx 32rpx 0;
		background-color: #FFFFFF;
	}
	
	.admin-box {
		position: relative;
		margin-top: -15rpx;
		border-radius: 60rpx 60rpx 0 0 / 40rpx 40rpx 0 0;
		padding: 40rpx 32rpx 0;
		background-color: #FFFFFF;
	}
</style>